<template>
  <div class="show">
    <!--标题区-->
    <h2 class="head">爱宠展示</h2>
    <!--导航区-->
    <div class="guideline">
      <ul>
        <li v-for="item in petsList" :key="item.id">
          <RouterLink
            :to="{
              name: 'xiangqing',
              params: {
                id: item.id,
                title: item.title,
                content: item.content,
              },
            }"
          >
            {{ item.title }}
          </RouterLink>
        </li>
      </ul>
    </div>
    <!--展示区-->
    <div class="showArea">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts" name="Show">
import { ref } from "vue";
import { RouterView, RouterLink } from "vue-router";

let petsList = ref([
  {
    id: 1,
    title: "贵宾犬",
    content:
      "贵宾犬动作灵敏，活泼开朗，极为聪明，易于训练。贵宾犬是一个古老的品种，祖先是长卷毛猎犬、又名法国水猎犬。贵宾犬无体臭，少掉毛，体态优雅，步伐轻松，智商很高、善解人意、温驯机警，是动物特技表演的主要明星之一。",
  },
  {
    id: 2,
    title: "拳狮犬",
    content:
      "拳师犬原产于德国，现广泛分布于全世界。性格方面，对主人忠诚，喜好嬉闹，感情丰富，有强烈的自制心，而且不记仇，即便年老时仍然可以充满活力。饲养时，应每天带犬只外出跑步，此外，尽量不要喂易敏感食物",
  },
  {
    id: 3,
    title: "牧羊犬",
    content:
      "德国牧羊犬毛色光亮、体格健壮、机灵、警惕性强。苏格兰牧羊犬拥有比较容易与人亲近并被驯化的特点。边境牧羊犬非常机警。喜乐蒂牧羊犬性格最温和也最通人性的。",
  },
]);
</script>

<style scoped>
</style>